import { BasicColumn, FormSchema } from '@/components/Table';
import { DescItem } from '@/components/Description';
import { h } from 'vue';
import { Image } from 'ant-design-vue';

/**
 * 表格列
 */
export const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    width: 80,
  },
  {
    title: '图片地址',
    dataIndex: 'url',
    width: 80,
    customRender: ({ record }) => {
      return h(Image, { src: record.url });
    },
  },
  {
    title: '跳转地址',
    dataIndex: 'path',
    width: 80,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 80,
  },
];

/**
 * 查询条件
 */
export const queryFormSchema: FormSchema[] = [];

/**
 * 查看详情表单
 */
export const retrieveDetailFormSchema: DescItem[] = [
  {
    field: 'name',
    label: '名称',
  },
  {
    field: 'url',
    label: '图片地址',
  },
  {
    field: 'path',
    label: '跳转地址',
  },
  {
    field: 'sort',
    label: '排序',
  },
  {
    field: 'createdAt',
    label: '创建时间',
  },
  {
    field: 'updatedAt',
    label: '更新时间',
  },
];

/**
 * 新增/编辑表单
 */
export const insertOrUpdateFormSchema: FormSchema[] = [
  {
    field: 'id',
    // 只是为了把ID带过来
    label: '主键ID',
    component: 'Render',
    ifShow: false,
  },
  {
    field: 'name',
    label: '名称',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'url',
    label: '图片地址',
    required: true,
    // component: 'Input',
    componentProps: {},
    slot: 'url',
  },
  {
    field: 'path',
    label: '跳转地址',
    required: false,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'sort',
    label: '排序',
    required: false,
    component: 'Input',
    componentProps: {},
  },
];
